import React, { Component } from 'react';
import { connect } from 'dva';
// import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
import { Alert,Input,Button,Badge,Tooltip,Table,Divider,Icon,Switch, Modal, Form,  Radio,InputNumber,Transfer  } from 'antd';
// import Login from '@/components/Login';
import styles from './Role.less';


const data = [
  {
    key: '1',
    resName: 'John Brown',
    resourceCode: 3001,
    resUrl: '角色名称',
    resType:"角色类型",
    sortNum:"创建时间",
    keyword:"创建人",
    gmtCreate:"创建时间",
    createUserName:"创建人",
    stauts:true,
    operation:"操作"
  },
  {
    key: '2',
    resName: 'John Brown',
    resourceCode: 3002,
    resUrl: '角色名称',
    resType:"角色类型",
    sortNum:"创建时间",
    keyword:"创建人",
    gmtCreate:"创建时间",
    createUserName:"创建人",
    stauts:true,
    operation:"操作"
  },
  {
    key: '3',
    resName: 'John Brown',
    resourceCode: 3003,
    resUrl: '角色名称',
    resType:"角色类型",
    sortNum:"创建时间",
    keyword:"创建人",
    gmtCreate:"创建时间",
    createUserName:"创建人",
    stauts:false,
    operation:"操作"
  },
  {
    key: '4',
    resName: 'John Brown',
    resourceCode: 3004,
    resUrl: '角色名称',
    resType:"角色类型",
    sortNum:"创建时间",
    keyword:"创建人",
    gmtCreate:"创建时间",
    createUserName:"创建人",
    stauts:true,
    operation:"操作"
  },
  {
    key: '5',
    resName: 'John Brown',
    resourceCode: 3005,
    resUrl: '角色名称',
    resType:"角色类型",
    sortNum:"创建时间",
    keyword:"创建人",
    gmtCreate:"创建时间",
    createUserName:"创建人",
    stauts:true,
    operation:"操作"
  },{
    key: '6',
    resName: 'John Brown',
    resourceCode: 3006,
    resUrl: '角色名称',
    resType:"角色类型",
    sortNum:"创建时间",
    keyword:"创建人",
    gmtCreate:"创建时间",
    createUserName:"创建人",
    stauts:true,
    operation:"操作"
  },{
    key: '7',
    resName: 'John Brown',
    resourceCode: 3007,
    resUrl: '角色名称',
    resType:"角色类型",
    sortNum:"创建时间",
    keyword:"创建人",
    gmtCreate:"创建时间",
    createUserName:"创建人",
    stauts:true,
    operation:"操作"
  },{
    key: '9',
    resName: 'John Brown',
    resourceCode: 3008,
    resUrl: '角色名称',
    resType:"角色类型",
    sortNum:"创建时间",
    keyword:"创建人",
    gmtCreate:"创建时间",
    createUserName:"创建人",
    stauts:false,
    operation:"操作"
  },{
    key: '10',
    resName: 'John Brown',
    resourceCode: 3009,
    resUrl: '角色名称',
    resType:"角色类型",
    sortNum:"创建时间",
    keyword:"创建人",
    gmtCreate:"创建时间",
    createUserName:"创建人",
    stauts:false,
    operation:"操作"
  },





];
const Search = Input.Search;

@Form.create()
@connect(({ orderList, loading }) => ({
  orderList,
  submitting: loading.effects['orderList/fetchList'],
}))
class ResourcesPage extends Component {
  state = {
    type: 'account',
    filteredInfo: null,
    sortedInfo: null,
    visible: false,
    value: "menu",
    currentRecord:{},
    resouceVisible:false,
    targetKeys: [],
    mockData: [
      {
        key: 0,
        title: `系统管理`,
        description: `资源`,
      },
      {
        key: 1,
        title: `系统管理`,
        description: `节点`,
      },
      {
        key: 2,
        title: `系统管理`,
        description: `字典`,
      },
    ],
  };
  handleChange = (pagination, filters, sorter) => {
    console.log('Various parameters', pagination, filters, sorter);
    this.setState({
      filteredInfo: filters,
      sortedInfo: sorter,
    });
  };

  clearFilters = () => {
    this.setState({ filteredInfo: null });
  };

  clearAll = () => {
    this.setState({
      filteredInfo: null,
      sortedInfo: null,
    });
  };

  setAgeSort = () => {
    this.setState({
      sortedInfo: {
        order: 'descend',
        columnKey: 'age',
      },
    });
  };
  onChange = (checked) =>  {
    console.log(`switch to ${checked}`);
  };
  saveFormRef = formRef => {
    this.formRef = formRef;
  };
  handleCreate = () => {
    const form = this.formRef.props.form;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }

      console.log('Received values of form: ', values);
      form.resetFields();
      this.setState({ visible: false });
    });
  };

  showModal = (record) => {
    this.setState({ visible: true,currentRecord:record });

  };

  showResouceModal = (record) => {
    this.setState({ resouceVisible: true,currentRecord:record });

  };

  handleCancel = () => {
    this.setState({ visible: false });
  };


  onCancel = () => {
    this.setState({
      resouceVisible:false
    })
  }

  onCreate = () => {
    this.setState({
      resouceVisible:false
    })
  }

  handleChange = targetKeys => {
    this.setState({ targetKeys });
  };


  render(){
    let { sortedInfo, filteredInfo,currentRecord,resouceVisible } = this.state;
    const {form:{getFieldDecorator}} = this.props
    sortedInfo = sortedInfo || {};
    filteredInfo = filteredInfo || {};
    const columns = [
      {
        title: '序号',
        dataIndex: 'key',
        key: '11',

      },
      {
        title: '角色编码',
        dataIndex: 'resourceCode',
        key: '9',

      },
      {
        title: '角色名称',
        dataIndex: 'resUrl',
        key: '8',

      },
      {
        title: '角色类型',
        dataIndex: 'resType',
        key: '7',

      },
      {
        title: '创建人',
        dataIndex: 'keyword',
        key: '6',

      },

      {
        title: '创建时间',
        dataIndex: 'sortNum',
        key: '5',
        filteredValue: filteredInfo.address || null,
        onFilter: (value, record) => record.address.includes(value),
        sorter: (a, b) => a.address.length - b.address.length,
        sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order,
      },

      {
        title: '操作',
        dataIndex: '',
        key: '1',
        render:(text,record)=>{
          console.log(text)
          return(
            <div className={styles.cur}>
              <Tooltip placement="topLeft" title="编辑">
                <span onClick={()=>{
                  this.showModal(record)
                }}><Icon type="edit" theme="twoTone" /></span>
              </Tooltip>
              <Divider type="vertical" />
              <Tooltip placement="topLeft" title="删除">
                <span><Icon type="delete" theme="twoTone" /></span>
              </Tooltip>
              <Divider type="vertical" />
              <Tooltip placement="topLeft" title="分配资源">
               <span onClick={()=>{
                 this.showResouceModal(record)
               }}><Icon type="dribbble-square" /></span>
              </Tooltip>
            </div>
          )
        }
      },
    ];
    return(
      <div className={styles.main}>
        <header>
          <h1>角色配置</h1>
          <div className={styles.seach}>
            <span>角色名称</span> <Input placeholder="请输入资源名称" />
          </div>
        </header>
        <div className={styles.nav}>
          <div className={styles.nav_hea}>
            <Button type="primary" onClick={()=>{this.showModal()}}>新增角色</Button>
          </div>
          <Table columns={columns} dataSource={data} onChange={this.handleChange} />
        </div>
        <CollectionCreateForm
          wrappedComponentRef={this.saveFormRef}
          visible={this.state.visible}
          onCancel={this.handleCancel}
          onCreate={this.handleCreate}
        />
        {
          resouceVisible && <Modal
            width="40%"
            visible={resouceVisible}
            title="资源分配"
            okText="确认"
            onCancel={this.onCancel}
            onOk={this.onCreate}
          >
            <Form layout="horizontal">
              <Form.Item>
                {(
                  <Transfer
                    dataSource={this.state.mockData}
                    showSearch
                    listStyle={{
                      width: '45%' ,
                      height: 300,
                    }}
                    targetKeys={this.state.targetKeys}
                    onChange={this.handleChange}
                    render={item => `${item.title}-${item.description}`}
                    footer={null}
                  />
                )}
              </Form.Item>
            </Form>
          </Modal>
        }
      </div>
    )
  }
}


const CollectionCreateForm = Form.create({ name: 'form_in_modal' })(
  // eslint-disable-next-line
  class extends React.Component {

    render() {
      const { visible, onCancel, onCreate, form } = this.props;
      const { getFieldDecorator } = form;
      return (
        <Modal
          visible={visible}
          title="编辑角色"
          okText="确认"
          onCancel={onCancel}
          onOk={onCreate}
        >
          <Form layout="horizontal">
            <Form.Item label="角色编码">
              {getFieldDecorator('name', {
                rules: [{required: true, message: '请输入角色编码'}]
              })(<Input placeholder='角色编码'/>)}
            </Form.Item>
            <Form.Item label="角色名称">
              <div className='tishi'>{getFieldDecorator('word', {
                rules: [{required: true, message: '请输入创建人'}]
              })(<Input placeholder='角色名称'/>)}<Tooltip autoAdjustOverflow={false} overlayClassName='toolp' placement="topRight" title={'资源标识符'}>
                <i className='iconfont icon-tishi'/>
              </Tooltip></div>
            </Form.Item>
            <Form.Item label="角色状态">
              {getFieldDecorator('model', {
                rules: [{required: true,message: '请选择功能模块'}]
              })( <Radio.Group  >
                <Radio value={'menu'}>正常</Radio>
                <Radio value={'function'}>禁用</Radio>
              </Radio.Group>)}
            </Form.Item>
          </Form>
        </Modal>
      );
    }
  },
);





export default ResourcesPage;
